<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options" @select="onItemSelect"></wyb-drop-down></view>

		<view class="list">
			<view class="item" v-for="(item, index) in buildList" :key="index" @click="openBuilderDetails(item.id)">
				<view class="item_image"><image :src="item.thumb" mode="scaleToFill"></image></view>
				<view>
					<view class="item_title">{{ item.name }}</view>
					<view class="item_content">{{ item.model.name }}/{{ item.style.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// https://ext.dcloud.net.cn/plugin?id=2650
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

export default {
	data() {
		return {
			options: [
				{
					header: '区域',
					selectItemIndex: 0,
					contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
				},
				{
					header: '风格',
					selectItemIndex: 0,
					contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
				},
				{
					header: '户型',
					selectItemIndex: 0,
					contents: ['115m²', '120m²', '135m²', '140m²']
				}
			],
			buildList: [],
			limit: 10,
			total: 0,
			page: 1
		};
	},
	components: {
		wybDropDown
	},
	onReachBottom() {
		this.loadNextPage();
	},
	onLoad() {
		this.loadPage(true);
	},
	methods: {
		onItemSelect(e) {
			console.log(e);
			this.buildList = [];
			this.options[e.headerIndex].selectItemIndex = e.contentIndex;
			this.page = 1;
			this.loadPage(true);
		},
		loadPage(isFirstLoad) {
			uni.showLoading({
				title: '加载中...'
			});
			setTimeout(
				() => {
					uni.request({
						url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
						method: 'POST',
						data: {
							page: this.page,
							limit: this.limit,
							area: this.options[0].selectItemIndex,
							style: this.options[1].selectItemIndex,
							model: this.options[2].selectItemIndex
						},
						success: res => {
							console.log(res.data);
							if (res.data.code == 200) {
								this.total = res.data.data.total;
								this.page = res.data.data.page;
								this.limit = res.data.data.limit;
								this.buildList = this.buildList.concat(res.data.data.list);
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								});
							}
						},
						complete() {
							uni.hideLoading();
						}
					});
				},
				isFirstLoad ? 0 : 400
			);
		},
		loadNextPage() {
			if (this.page < this.total / this.limit) {
				this.page++;
				this.loadPage(false);
			}
		},
		openBuilderDetails(id) {
			uni.navigateTo({
				url: `/pages/index/builder/details/details?id=${id}`
			});
		},
	}
};
</script>

<style lang="less" scoped>
.content {
	padding-top: 96rpx;

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;

		.item {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

			.item_image {
				width: 100%;

				image {
					height: 196rpx;
					border-radius: 12rpx 12rpx 0 0;
					display: block;
					width: 100%;
				}
			}
			.item_title {
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.item_content {
				font-size: 20rpx;
				color: #666666;
				margin-left: 20rpx;
				margin-bottom: 12rpx;
			}
		}
	}
}
</style>
